<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>注册登陆</title>
    <link rel="stylesheet" type="text/css" href="./css/login.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="stylesheet" href="./js/jquery.min.js"/>
    <script src="./js/jquery.min.js"></script>
</head>
<body>
    <div class="top">
        <p id="topP" style="display: flex;justify-content: space-between;margin-top: 8%;">

            <span onclick="window.location.href='PersonalCenter.html'">
                <img src="images/xiaoyuhao.png" alt="" width="16%" style="margin-left:24%;margin-top: 3%;">
            </span>

            <span class="zhuce">注册登陆</span>

            <span onclick="window.location.href='interface.html'">
               <img src="images/客服.png" alt="" width="16%" style="margin-left: 59%;margin-top: 3%;">
            </span>
        </p>
    </div>
    <div class="container">


    <div class="block">
        <ul>
            <div class="block bottom">
                <!-- <p style="width: 16%;"> -->
                <span>+86</span>
                <span>I</span>
                <!-- </p>     -->
                <input type="text" placeholder="输入邮箱号">
            </div>
            <div class="blockTwo bottom" style="overflow: hidden;">
                <div style="float:left">
                    <input type="text" style="margin-left: -30%;" placeholder="输入验证">
                </div>
                <div onclick="getCode()" class="block code"  style="background-color: #1EA5F6;">
                    <a href="#">获取验证码</a>
                </div>
            </div>

            <div onclick="login()" class="block bottom bottom_color">
                <a href="#">立即登录</a>
            </div>
            <!-- margin-left: 14%; -->
            <p class="bottom bottomP">首次登录用户验证后自动登录</p>
        </ul>
    </div>
        <!-- margin-left: 36%; -->
        <p class="bottom qita" style="color: gray;width: 72%;margin:20% 36% 0 36%;">其他登录方式</p>
        <p style="color: gray;width: 72%;margin:5% 36% 0 41%;"><a href="autologin.html">手机号登录</a></p>
        <p></p>
    <p class="p" style="text-align: center; width: 72%;margin: auto;">
        <img src="images/web_微信.png" alt="" width="10%">
        <img src="images/QQ (1).png" alt="" width="10%">
        <img src="images/web_新浪微博.png" alt="" width="10%">
    </p>
</div>
<script>


    var time = 60;
    function getCode() {
        var email = document.getElementsByTagName("input")[0].value;
        if (email == "") {
            alert("请输入邮箱号");
            return;
        }
        // var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
        // if (!reg.test(email)) {
        //     alert("请输入正确的邮箱号");
        //     return;
        // }

        var timer = setInterval(function () {
            time--;
            if (time == 0) {
                clearInterval(timer);
                document.getElementsByClassName("block")[2].innerHTML = "<a onclick=\"getCode()\" href='#'>获取验证码</a>";
            } else {
                document.getElementsByClassName("block")[2].innerHTML = "<a onclick=\"CodeWarn()\" href='#'>"+time + "s</a>";
            }
        }, 1000);
        $.ajax({
            url: "/user/emailCode/" + email,
            type: "get",
            success: function (data) {
            }
        });
    }

    function CodeWarn() {
        alert("请" + time + "秒后再获取验证码");
    }

    function login() {
        var email = document.getElementsByTagName("input")[0].value;
        var code = document.getElementsByTagName("input")[1].value;
        console.log(email);
        console.log(code);
        if (email == "") {
            alert("请输入邮箱号");
            return;
        }
        if (code == "") {
            alert("请输入验证码");
            return;
        }
        $.ajax({
            url: "/user/emailCodeLogin",
            type: "post",
            data: {
                email: email,
                code: code
            },
            success: function (data) {
                console.log(data);
                if (data.code == 200) {
                    //跳转到上一个页面
                    window.location.href = "/PersonalCenter.html";
                } else {
                    alert("登录失败");
                }
            }
        });
    }
</script>
</body>
</html>